import { Button, Dropdown, Menu , Select } from 'antd'
import styles from './viewPlan.less'
import useStore from '@/context/useStore'
import { useEffect, useState } from 'react';

import { selectClassPlanItem , selectClassPlanInitItem , SelectChildrenList , SelectChildrenMyProject, viewSortItem} from '@/utils/viewPlan'
import { GetSelectClassPlan } from '@/services';
import { observer } from 'mobx-react-lite';
// 引入组件
import viewPlanStatistical from '@/components/viewPlanStatistical'

const { Option } = Select;
const viewPlan:React.FC = (props) =>{

    // 调用mobx方法
    let { selectClassPlan } = useStore ();

    let [ selectClassPlanValue , SetSelectClassPlanValue ] = useState<selectClassPlanItem[]>([]) 
    // let DefaultValue :selectClassPlanItem  = {} as selectClassPlanItem;

    let [ CurrentID , SetCurrtenID ] = useState('');

    let [ FlagArray , SetFlagArray ] = useState( [ false ] );

    // 获取页面起始值
    useEffect(() => {
        GetSelectValueFun();        
    } , [])

    // 获取页面值
    async function GetSelectValueFun(){
        await GetSelectClassPlan().then(val=>{
             SetSelectClassPlanValue(val.data);
        })
    }

    // 监听改变值
    useEffect(() => {
        selectClassPlan.GetGetclassRankValue(CurrentID);
        selectClassPlan.GetselectClassPlanInit(CurrentID)
        selectClassPlan.GetclassRankSort(CurrentID)
        console.log(selectClassPlan.DetailItem.list);

        let NewFlag =  selectClassPlan.DitailSort.map(()=>{
            return false;
        })

        SetFlagArray(NewFlag)
        
    } , [CurrentID])

    // 改变下拉列表
    function changeFlagEvent(Index : number){
        
        let NewFlag = [ ...FlagArray ]
        let Change = NewFlag.map( (item,index)=>{
            if( index == Index )
            {
                // console.log(item,!item);
                
                return !item;
            }
            return item
        } )
        // console.log(Change);
        SetFlagArray(Change)

    }

    // 选中后改变
    async function handleChange(value:string){
        await SetCurrtenID(value);
    }
    
    return <div className={ styles.viewPlan }>
        <h5>
            进度/ <span>进度监控</span>
        </h5>
    
        <header className={styles.Header}>
            <div className={ styles.header_Top }>
                <div className={styles.Top_Left}>
                    <h3>
                        { selectClassPlan.DetailValue.className || '标题'}
                    </h3>
                    <h2>
                        { selectClassPlan.DetailValue.planname || 'title'}
                    </h2>
                    <p>{ selectClassPlan.DetailValue.begintime || 'startTime'}  -  { selectClassPlan.DetailValue.endtime || 'endTime'}</p>
                </div>
                <div className={styles.Top_Right}>

                <Select defaultValue='defaultValue' style={{ width: 120 }} onChange={value=>handleChange(value)}>
                    {
                        selectClassPlanValue.map((item,index)=>{
                            return <Option key={index} value={item.id}>
                            {item.planname}
                        </Option>
                        })
                    }
                </Select>

                </div>
            </div>
            <div className={ styles.header_Main }>
                <div>
                    <span className={styles.Sum1}>
                        { selectClassPlan.DetailValue.countStus || 0}
                    </span>
                    <p>总人数</p>
                </div>
                <div>
                    <span className={styles.Sum2}>
                        { selectClassPlan.DetailValue.progress + "%"|| 0 + "%"}
                    </span>
                    <p>完成率</p>
                </div>
                <div>
                    <span className={styles.Sum3}>
                        { selectClassPlan.DetailValue.countCompleted || 0}
                    </span>
                    <p>按期完成人数</p>
                </div>
                <div>
                    <span className={styles.Sum4}>
                        { selectClassPlan.DetailValue.countUncompleted || 0}
                    </span>
                    <p>延期完成人数</p>
                </div>
            </div>
        </header>

        {selectClassPlan.DetailItem.list? <div className={styles.Detail_Main}>
            <div className={styles.Detail_Left}>
                {
                    selectClassPlan.DetailItem.list.map( (item : SelectChildrenList , index)=>{
                        return <div key={index} className={styles.Item_View}> 
                        <h2 className={styles.Item_View_H2}>
                            { item.groupname }
                        </h2>
                        <div className={styles.Item_Item_H}></div>
                        <p>
                            <span>人员{ item.members } </span>&emsp;
                            <span>按期完成{ item.finished == null ?  0 : 0 }</span>&emsp;
                            <span>延期完成{ item.groupProgress }</span>
                        </p>

                        <div className={styles.Flag}>
                            {/* <p>
                                <span>
                                    三个带改变的值
                                    ·
                                </span>
                                <span>
                                    三个带改变的值
                                    ·
                                </span>
                                <span>
                                    三个带改变的值
                                    ·
                                </span>
                            </p> */}
                            

                            <span onClick={()=>changeFlagEvent(index)}> { FlagArray[index] ? '收起↑' : '展开↓'  } </span>

                        </div>
                        { FlagArray[index] ? 
                            <table  className={styles.Table_View}>
                            <thead>
                                <tr>
                                    <td className={styles.View_Name}>
                                        姓名
                                    </td>
                                    {
                                        item.myProject.map((ite :SelectChildrenMyProject ,ind : number)=>{
                                            return <td key={ind}  >
                                                {ite.proname} 
                                            </td>
                                        })
                                    }
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    item.stuList.map((ite,ind)=>{
                                        return <tr key={ind}>
                                            <td> { ite.username } </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                    })
                                }
                            </tbody>
                        </table>
                        :  null}

                        </div>
                    } )
                }
            </div>

            <div className={styles.Detail_Right}>
                <h4>
                    班级排行榜
                </h4>
                {
                    selectClassPlan.DitailSort.map( (item:viewSortItem ,index)=>{
                        return <div key={index} className={styles.view_Item}>
                            { index +1 <= 3 ? <div className={index==0 ? styles.Item_Red : index == 1 ? styles.Item_Yellow : index == 2 ? styles.Item_Blue : styles.ViewSortTop}>
                                TOP.{index+1}
                            </div>: null }
                            

                            
                            <div className={styles.view_Item_Img}>
                                <img width='30' height='30' src={`http://111.203.59.61:8060${item.studentUrl}`} alt="" />
                            </div>
                            <div>
                                <p>
                                    { item.username }
                                </p>
                                <span>
                                    { item.groupname }
                                </span>
                            </div>
                            <div>
                                { Number(item.taskCompletedpProgress * 100) }%
                            </div>
                        </div>
                    } )
                }
            </div>
            
            
        </div> : null }
    </div>
}

export default observer(viewPlan)